---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_two5-post-processing.json';
---

<Layout title={title}>
  <section class="container">
    <two5-display class="display">
      <two5-texture-store id="texstore" src="/lookbook/assets/textures.json">
        <two5-post-processing debug>
          <two5-stage2d id="mystage" projection-type="parallax" fit="cover" width="1000" height="568"></two5-stage2d>
          <two5-unreal-bloom-pass debug strength="0.4" radius="0.3" threshold="0.95"></two5-unreal-bloom-pass>
          <two5-glitch-pass debug></two5-glitch-pass>
        </two5-post-processing>
      </two5-texture-store>
    </two5-display>
  </section>
</Layout>

<style>
  :global(.lil-gui) :global(option) {
    color: #555;
  }

  :root {
    --space: 50px;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space) auto 0;
    overflow: hidden;
    border: 1px solid #ef0;
    border-radius: var(--space);
  }

  .display {
    width: 100%;
    min-width: 320px;
    height: 61.8vh;
    min-height: 160px;
  }
</style>

<script>
  import {TextureStore} from '@spearwolf/twopoint5d';
  import {Stage2DElement, TextureStoreElement, whenDefined} from '@spearwolf/twopoint5d-elements';
  import '@spearwolf/twopoint5d-elements/two5-display.js';
  import '@spearwolf/twopoint5d-elements/two5-glitch-pass.js';
  import '@spearwolf/twopoint5d-elements/two5-post-processing.js';
  import '@spearwolf/twopoint5d-elements/two5-stage2d.js';
  import '@spearwolf/twopoint5d-elements/two5-texture-store.js';
  import '@spearwolf/twopoint5d-elements/two5-unreal-bloom-pass.js';
  import GUI from 'lil-gui';
  import {Color, Sprite, SpriteMaterial} from 'three';

  // -----------------------------

  const [textureStore, mystage] = (await Promise.all([
    whenDefined(document.getElementById('texstore')).then((el) => (el as TextureStoreElement).store),
    whenDefined(document.getElementById('mystage')),
  ])) as [TextureStore, Stage2DElement];

  const {scene} = await mystage.firstFrame();

  scene.background = new Color(0x210611);

  const sprite = new Sprite();
  sprite.scale.set(1000, 568, 1);
  scene.add(sprite);

  textureStore.get('happyWurmFace', ['texture', 'imageCoords'], ([texture, imageCoords]) => {
    console.log('texture', {texture, imageCoords});

    sprite.material?.dispose();
    sprite.material = new SpriteMaterial({map: texture});
  });

  // -----------------------------

  const gui = new GUI({title: 'post-processing'});

  const unrealBloomFolder = gui.addFolder('unreal bloom');
  const unrealBloom = document.querySelector('two5-unreal-bloom-pass');

  unrealBloomFolder.add(unrealBloom, 'strength', 0, 5, 0.01);
  unrealBloomFolder.add(unrealBloom, 'radius', -2, 3, 0.01);
  unrealBloomFolder.add(unrealBloom, 'threshold', 0, 1, 0.01);
  unrealBloomFolder.add(unrealBloom, 'disabled');

  const glitchFolder = gui.addFolder('glitch');
  const glitch = document.querySelector('two5-glitch-pass');

  glitchFolder.add(glitch, 'disabled');
</script>
